<template>
    <template v-for="menuItem in menuList">
        <el-sub-menu :index="menuItem.index" v-if="menuItem.hasChild" :show-timeout="0" :hide-timeout="0">
            <template #title>
                <el-icon>
                    <el-icon>
                        <component :is="menuItem.icon" />
                    </el-icon>
                </el-icon>
                <span>{{menuItem.title}}</span>
            </template>
            <MenuItem :menu-list="menuItem.childs" v-if="menuItem.hasChild" />
        </el-sub-menu>
        <el-menu-item :index="menuItem.index" v-if="!menuItem.hasChild" @click="refreshNavTabs(menuItem)">
            <el-icon>
                <component :is="menuItem.icon" />
            </el-icon>
            <span>{{menuItem.title}}</span>
        </el-menu-item>
    </template>
</template>

<script lang="ts">
    
    import {
        Location,
        Document,
        Setting,
        Close,
        Failed,
        Warning,
        View,
        SuccessFilled
    } from '@element-plus/icons-vue';
    import { ElMenuItem } from 'element-plus';

    import { defineComponent, ref, inject } from 'vue';
    import { MenuItem } from '../../types/interfaces';

    export default defineComponent({
        name: "MenuItem",
        props: {
            menuList: {
                type: Object,
                reqiured: true
            }
        },

        emits: {
            linkClick: (id: number) => {
                return true;
            }
        },

        components: {
            Location,
            Document,
            Setting,
            Close,
            Failed,
            Warning,
            View,
            SuccessFilled
        },

        setup(props, {emit}) {
            const updateNavTabs = (id: number) => {
                console.log(11 + ' -> ' + id);
                emit('linkClick', id);
            };

            const refreshNavTabs = inject<any>('refreshNavTabs');

            return {
                updateNavTabs,
                refreshNavTabs
            }
        },

        methods: {

        }
    })
</script>